<template>
  <div>

    <div id="Container">
      <div id="search">
        <div class="search_left"><span>查询的数据显示:</span></div>

        <div class="search_right">
          <el-button type="primary" @click="searchData">查询</el-button>
          <el-button type="primary" @click="exportData">导出</el-button>

        </div>
        <div class="search_right">
          <span style="color: #cccccc;font-size: 17px;font-family:'华文宋体';font-weight: bolder;padding-left: 10px ">用户:</span>
          <input style="width: 200px;height: 40px; border-radius:5px;border: 2px solid #ccc;outline: none" v-model="keyWord" placeholder="请输入关键字或详细内容" />
        </div>
      </div>

      <div id="tableDatas">
        <el-table
            :data="tableData"

            style="color: black; width: 100%;align-content: center;margin: 0px auto;margin-top: -7px; ">
          <el-table-column
              prop="wid"
              label="编号"
              width="140">
          </el-table-column>
          <el-table-column
              prop="account"
              label="账户"
              width="140">
          </el-table-column>
          <el-table-column
              prop="name"
              label=" 姓名"
              width="140">
          </el-table-column>
          <!--          <el-table-column-->
          <!--              prop="sex"-->
          <!--              label="性别">-->
          <!--          </el-table-column>-->
          <el-table-column label="性别" width="140">
            <template v-slot="scope">
              {{ scope.row.sex === 'M' ? '女性' : '男性' }}
            </template>
          </el-table-column>

          <!--          <el-table-column-->
          <!--              prop="roleInt"-->
          <!--              label="人员类型">-->
          <!--          </el-table-column>-->
          <!-- 从 Vue 2.6 开始，v-slot 可以直接用在组件上或者 <template> 标签上，但是它不能和旧的 slot 或 slot-scope 属性混用-->
          <el-table-column label="人员类型" width="140">
            <template v-slot="scope">
              <!--              {{ scope.row.status === '1' ? '超级管理员' : (scope.row.status === '2'?'开发人员':'普通人') }}-->
              {{ scope.row.status === 1 ? '超级管理员' : (scope.row.status === 2 ? '开发人员' : '普通人') }}
            </template>
          </el-table-column>
          <el-table-column label="账号状态" width="140">
            <template v-slot="scope">
              {{ scope.row.status === '0' ? '已禁用' : '正常' }}
            </template>
          </el-table-column>

          <el-table-column
              prop="createTime"
              label="创建时间"
              width="160"
          >
          </el-table-column>
          <el-table-column
              prop="updateTime"
              label="修改时间"
              width="160">
          </el-table-column>
        </el-table>
      </div>
      <div id="page">
        <!--      分页查询  :class="page_class"-->
        <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            :current-page.sync="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>

  </div>

</template>
<script>
import axios from 'axios'


import {mapState,} from 'vuex'
import config from "@/com_code/WorkerCode";

export default {
  name: "EmployeePageAdmins",

  data() {
    return {
      KeyEid:"",
      keyWord: "",
      tableData: [],
      page: 1,
      pageSize: 10,
      counts: 0,
      name: '',
    }
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
 searchData() {
      this.name=this.keyWord;
      this. init();
    },
    exportData(){
      this.name=this.keyWord;
      axios.post(`api/work/EmployeesExport?name=${this.name}`).then((res) => {
        console.log(res);
        if(res.data.code === config.exportEmployeeSuccess)
        {
          // eslint-disable-next-line no-debugger
          // debugger;
          // console.log(res.data);
          this.suMsg=res.data.data;
          this.$message({
            message:this.suMsg,
            type: 'success', // 设置消息类型为错误
            duration: 2000, // 设置消息显示时间为3秒，默认是2000毫秒
          });
          return;
        }
      }).catch(error => {
        console.log(error)
        return;
      })
    },
    //显示的页数量
    handleSizeChange(val) {
      this.pageSize = val
      console.log("handleSizeChange===val", val);
      this.init()
    },
    //当前页第几页
    handleCurrentChange(val) {
      this.page = val;
      this.init()

    },

    init() {
      axios.post('/x-user/select_xuser_pages', {
        page: this.page,
        pageSize: this.pageSize,
        name: this.name,
      }).then((res) => {
        console.log(res)
        // 处理响应数据
      }).catch((error) => {
        // 处理错误
        console.log(error);
      });
    }
  },
  mounted() {
    this.currentUser = this.user;
    this.init();
  },

}
</script>


<style scoped>
#Container {
  margin-right: 10px;
  //width: 1600px;
  width: 100%;
  height: 500px;
  //background-color: steelblue;

}

#tableDatas {
  width: 100%;
}

.page_class {
  background-color: white;
}

#page {

  margin: 0.5px auto;
  //width: 92.2%;
  width: 100%;
  //float: right;
  //margin-right: 70px;
  background-color: white;
}


#search {
  margin: 10px auto;
  //width: 92.2%;
  width: 100%;
  height: 60px;
  background-color: white;
}

.search_left {
  width: 200px;
  float: left;
  margin-left: 10px;
  span {
    display: block;
    margin-top: 10px;
    font-family: 微软雅黑;
    font-size: 20px;
    color: black;

    font-weight: bold;
  }
}


.search_right {
  width: 500px;
  margin-top: 10px;
  margin-right: 10px;
  float: right;
}
.search_right input{
  overflow: hidden;

}
.search_right input:hover{
  border-color: steelblue !important;
}
</style>
